<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>最小化消息测试</title>
    <style>
        .chat-container { 
            width: 600px; 
            margin: 20px auto; 
            border: 1px solid #ddd; 
            padding: 20px; 
        }
        
        .message-wrapper {
            display: flex;
            margin-bottom: 15px;
        }
        
        .user-message-wrapper {
            justify-content: flex-end;
        }
        
        .ai-message-wrapper {
            justify-content: flex-start;
        }
        
        .message {
            display: flex;
            max-width: 70%;
            align-items: flex-end;
            gap: 10px;
        }
        
        .user-message {
            flex-direction: row-reverse;
        }
        
        .message-content {
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 100%;
            word-wrap: break-word;
        }
        
        .user-message .message-content {
            background: #667eea;
            color: white;
        }
        
        .ai-message .message-content {
            background: #e9ecef;
            color: #333;
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .user-avatar {
            background: #667eea;
            color: white;
        }
        
        .ai-avatar {
            background: #6c757d;
            color: white;
        }
        
        .loading-state {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
        }
        
        .loading-spinner {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        button { 
            margin: 5px; 
            padding: 10px 15px; 
            background: #667eea; 
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
        }
        
        .debug-info {
            background: #f8f9fa;
            padding: 10px;
            margin: 10px 0;
            border-left: 3px solid #667eea;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>🔬 最小化消息流程测试</h1>
    
    <div class="debug-info" id="debugInfo">准备开始测试...</div>
    
    <button onclick="testStep1()">步骤1: 添加用户消息</button>
    <button onclick="testStep2()">步骤2: 添加AI loading消息</button>
    <button onclick="testStep3()">步骤3: 更新AI消息内容</button>
    <button onclick="testFullProcess()">完整流程测试</button>
    <button onclick="clearAll()">清空</button>
    
    <div class="chat-container" id="chatContainer"></div>

    <script>
        let debugInfo = document.getElementById('debugInfo');
        let chatContainer = document.getElementById('chatContainer');
        let testMessageId = null;
        
        function log(message) {
            debugInfo.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        function addMessage(type, content, loading = false) {
            const messageId = 'msg_' + Date.now();
            const messageEl = document.createElement('div');
            messageEl.className = `message-wrapper ${type}-message-wrapper`;
            messageEl.id = messageId;
            
            log(`🎨 添加消息: type=${type}, loading=${loading}, id=${messageId}`);
            log(`📝 CSS类名: ${messageEl.className}`);
            
            if (type === 'user') {
                messageEl.innerHTML = `
                    <div class="message user-message">
                        <div class="message-content">
                            <div class="message-text">${escapeHtml(content)}</div>
                        </div>
                        <div class="message-avatar user-avatar">👤</div>
                    </div>
                `;
            } else {
                messageEl.innerHTML = `
                    <div class="message ai-message">
                        <div class="message-avatar ai-avatar">🤖</div>
                        <div class="message-content">
                            ${loading ? 
                                `<div class="loading-state">
                                    <div class="loading-spinner">⚙️</div>
                                    <div class="loading-text">伯乐正在思考中...</div>
                                </div>` :
                                `<div class="message-text">${escapeHtml(content)}</div>`
                            }
                        </div>
                    </div>
                `;
            }
            
            chatContainer.appendChild(messageEl);
            log(`✅ 消息已添加到DOM`);
            
            return messageId;
        }
        
        function updateMessage(messageId, content) {
            log(`✏️ 尝试更新消息: ${messageId}`);
            const messageEl = document.getElementById(messageId);
            if (messageEl) {
                log(`📝 找到消息元素: ${messageEl.className}`);
                const messageContent = messageEl.querySelector('.message-content');
                if (messageContent) {
                    log(`🔄 更新前内容: ${messageContent.innerHTML.substring(0, 50)}...`);
                    messageContent.innerHTML = `<div class="message-text">${escapeHtml(content)}</div>`;
                    log(`✅ 消息内容已更新`);
                    log(`🔄 更新后内容: ${messageContent.innerHTML.substring(0, 50)}...`);
                } else {
                    log(`❌ 未找到 .message-content 元素`);
                }
            } else {
                log(`❌ 未找到消息元素: ${messageId}`);
            }
        }
        
        function testStep1() {
            log(`=== 步骤1: 添加用户消息 ===`);
            addMessage('user', '找几个Python工程师');
        }
        
        function testStep2() {
            log(`=== 步骤2: 添加AI loading消息 ===`);
            testMessageId = addMessage('ai', '', true);
            log(`🆔 保存的消息ID: ${testMessageId}`);
        }
        
        function testStep3() {
            if (!testMessageId) {
                log(`❌ 请先执行步骤2`);
                return;
            }
            log(`=== 步骤3: 更新AI消息内容 ===`);
            updateMessage(testMessageId, '找到 16 位Python候选人，推荐候选人：候选人_11813872（20年经验）');
        }
        
        async function testFullProcess() {
            log(`=== 开始完整流程测试 ===`);
            clearAll();
            
            // 步骤1: 用户消息
            addMessage('user', '找几个Python工程师');
            
            // 步骤2: AI loading
            const aiMsgId = addMessage('ai', '', true);
            
            // 模拟网络延迟
            setTimeout(() => {
                log(`=== 模拟API响应，更新消息 ===`);
                updateMessage(aiMsgId, '找到 16 位Python候选人，推荐候选人：候选人_11813872（20年经验）');
            }, 2000);
        }
        
        function clearAll() {
            chatContainer.innerHTML = '';
            debugInfo.innerHTML = '聊天记录和日志已清空';
            testMessageId = null;
        }
        
        // 页面加载完成后自动运行一次完整测试
        window.onload = () => {
            log('🚀 页面加载完成，开始自动测试');
            setTimeout(testFullProcess, 1000);
        };
    </script>
</body>
</html>










